<template name="components">
  <view class="">
    <uni-nav-bar
      fixed
      title="报名动态"
      status-bar
	    left-icon="left"
      background-color="#2163e0"
      color="#fff"
      @clickLeft="back"
    />
    <scroll-view scroll-y class="page">
      <view class="home-content-list">
        <view
          class="list"
          v-for="(item, index) in matterList"
          :key="index"
          @click="detail(item)"
        >
		<view style="width: 40%;height: auto">
			<img style="width: 100%;height: 100%" v-if="item.hyDynamicImgList.length > 0" :src="item.hyDynamicImgList[0].dynamicImg" alt="" />
		</view>
          <view class="list-content">
			  <view class="title">{{item.dynamicTitle}}</view>
			  <view class="desc">{{item.dynamicContent}}</view>
			  <view class="time">{{item.deptHelpName}}&nbsp;&nbsp;&nbsp;{{item.createTime}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import * as api from '@/api/api';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: 'demand',
  components: {},
  data() {
    return {
      pageNo: 1,
      finished: false,
      loading: false,
      value: ['', ''],
      headerSelectGroup: [
        [],
        [],
      ],
      matterList: [],
	  sysOrgCode: '',
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  mounted() {
    this.gethyDemand();
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    detail(item) {
		uni.navigateTo({
			url: "/pages/component/signdetailed?dynamicId=" + item.id,
		});
    },
    /**
     * 根据当前选中的状态获取相应的hyDemand列表。
     * 此函数用于初始化和更新matterList数据，展示特定状态下的需求列表。
     * @param {any} ev - 用于确定需求状态的值，此值来自于组件的绑定值。
     */
    gethyDemand(ev = {}) {
      let { status = 'init' } = ev;
      if (status == 'init') {
        this.pageNo = 1;
        this.matterList = [];
        this.finished = false;
      }
      // 初始化请求参数，包括分页信息和需求状态
      let data = {
      };
      this.loading = true;
      // 调用API获取需求列表
      api.getRegistrationList(data)
        .then(({ data: e }) => {
          this.matterList.push(...e.result);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  height: 100vh;
}
.header-select {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 35px;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  .home-items {
    position: relative;
    width: 50vw;
    height: 30px;
    line-height: 50px;
    font-weight: 700;
    color: #000;
    .up {
      position: absolute;
      display: inline-block;
      width: 0;
      height: 0;
      right: 20%;
      top: 30%;
      border-top: 10px solid transparent;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-bottom: 10px solid #797979;
      border-radius: 5px;
    }
    .down {
      position: absolute;
      display: inline-block;
      width: 0;
      height: 0;
      right: 20%;
      top: 45%;
      border-top: 10px solid #797979;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-radius: 5px;
    }
  }
}
.home-content-list {
  padding: 10px;
  padding-bottom: 10px;
  .list {
    width: 95%;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px auto;
    display: flex;
    justify-content: space-around;
    padding: 5px;
    .list-content {
      width: 100%;
      height: 100%;
	  margin-left: 10px;
      .title {
        font-size: 30upx;
      }
      .desc {
        height: 60upx;
        line-height: 30upx;
        font-size: 26upx;
		margin-top: 7px;
        color: #666;
        display: -webkit-box; /* 使用Webkit的弹性盒子模型显示 */
        -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
        -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
        overflow: hidden; /* 隐藏超出的内容 */
      }
      .time {
        padding-top: 25upx;
        text-align: right;
        height: 26upx;
        font-size: 26upx;
      }
    }
  }
}
</style>
